<template>
    <view class="afterSales pb-100">
        <Navigation title="投诉建议" background="#fff" />
        <view class="ph-40 background-white pb-36">
            <view class="f h-112 ai-c border" @click="changeType">
                <view class="fs-32 text-color4 mr-40">反馈类型</view>
                <view class="f ai-c f1 jc-s-b">
                    <view> <u--input placeholder="请选择" border="none" v-model="type" readonly fontSize="16"></u--input></view>
                    <u-icon name="arrow-right" color="#999999" size="16"></u-icon>
                </view>
            </view>
            <view class="fs-32 text-color4 mt-32">您希望的解决方式 </view>
            <view class="w-f h-324 b-8 mt-24 remark ph-32 pv-28">
                <u--textarea v-model="content" placeholder="请输入" border="none" count maxlength="200"></u--textarea>
            </view>
        </view>
        <view class="mt-24 background-white ph-40 pv-32">
           <view style="display: flex;align-items: center;flex-wrap: wrap;">
           	<image :src="item2" class="w-146 h-146 f ai-c jc-c b-8 fd-c m-10" style="border: 1px solid #e2e2e2;" v-for="item2 in picUrls"></image>
               <view class="w-146 h-146 f ai-c jc-c b-8 upload fd-c m-10" @click="changeAva(picUrls)">
                   <image src="http://cwht.ricecs.cn/app/mine/camera.png" class="w-48 h-42"></image>
                   <view class="fs-24 text-color3 mt-11">添加图片</view>
               </view>
           </view>
        </view>
        <view :style="{ paddingBottom: safeAreaBottom + 'px' }" class="bot w-f">
            <view class="f ai-c ph-40 h-136 jc-s-b">
                <view class="w-327 h-96 b-96 f ai-c jc-c fs-32 fw-600 text-color2 cancel" @click="back">取消</view>
                <view class="w-327 h-96 b-96 f ai-c jc-c fs-32 fw-600 text-color5 submit" @click="send">提交</view>
            </view>
        </view>
        <!-- 类型 -->
        <u-popup :show="show" round="12">
            <view>
                <scroll-view scroll-y="true" style="max-height: 500rpx">
                    <view class="list f ai-c jc-c h-112 w-f fs-32 fw-600 text-color4" v-for="(item,index) in cateList" @click="chooseItem(item.label)">{{item.label}}</view>
                </scroll-view>
                <view class="list-cancel f ai-c jc-c h-112 w-f fs-32 fw-600 text-color4" @click="show = false">取消</view>
            </view>
        </u-popup>
    </view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { dictDataType } from '@/services/api/dict';
import { optioncreate } from '@/services/api/index';
import { getBaseUrl, getUploadUrl } from '@/utils/env';
const picUrls = ref<any[]>([]);
const cateList = ref<any[]>([]);
const type = ref('');
const content = ref('');
const show = ref(false);
loadData();

async function loadData(){
	let data={
		type:'system_option_type'
	}
	const res=await dictDataType(data)
	cateList.value=res.data
}
function changeType() {
    show.value = true;
}
function back(){
	uni.navigateBack()
}
function chooseItem(item){
	type.value=item
	show.value=false
}
async function send(){
	if(type.value==''){
		uni.showToast({
			icon:'none',
			title:'请选择反馈类型'
		})
		return
	}
	if(content.value==''){
		uni.showToast({
			icon:'none',
			title:'请输入反馈内容'
		})
		return
	}
	let data={
		type:type.value,
		content:content.value,
		picUrls:picUrls.value
	}
	await optioncreate(data)
	uni.showToast({
		icon:'none',
		title:'提交成功'
	})
	setTimeout(()=>{
		uni.navigateBack()
	},500)
}
function changeAva() {
    uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album'], //从相册选择
        success: function (res) {
            uni.uploadFile({
                url: getUploadUrl(),
                filePath: res.tempFilePaths[0],
                name: 'file',
                formData: {
                    user: 'test',
                },
                success: (res) => {
                     picUrls.value.push(JSON.parse(res.data).data)
                },
            });
        },
    });
}
//底部安全距离
const systemInfo = uni.getSystemInfoSync();
let safeArea = systemInfo.safeArea;
let screenHeight = systemInfo.screenHeight;
let safeAreaBottom = screenHeight - safeArea.bottom;
</script>
<style lang="scss" scoped>
.afterSales {
    min-height: 100vh;
    background: #f5f5f5;
    .list {
        border-bottom: 1px solid #f5f5f5;
    }
    .list-cancel {
        border-top: 24rpx solid #f5f5f5;
    }
    .active {
        color: #fabb3c;
    }
    .bot {
        position: fixed;
        left: 0;
        bottom: 0;
        background: #fff;
        border-top: 1px solid #f5f5f5;
        .submit {
            background: #fabb3c;
        }
        .cancel {
            background: #f5f5f5;
        }
    }

    .upload {
        border: 1rpx solid #dddddd;
    }
    ::v-deep .u-upload__wrap__preview {
        margin: 0 10rpx 10rpx 0 !important;
    }
    ::v-deep .u-upload__wrap__preview:nth-child(4n) {
        margin: 0 0 10rpx 0 !important;
    }
    .background-white {
        background: #fff;
    }
    ::v-deep .u-textarea__count {
        background: #f8f8f8 !important;
        color: #cccccc !important;
        font-size: 24rpx !important;
    }

    ::v-deep .u-textarea {
        padding: 0;
    }
    ::v-deep .u-textarea__field {
        background: #f8f8f8;
        height: 220rpx !important;
    }
    .remark {
        background: #f8f8f8;
    }
    .border {
        border-bottom: 1px solid #f8f8f8;
    }
}
</style>
